iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 25
1
Modern Web

JS讀書筆記系列 第 25

JS讀書筆記30天 - Day25 Bootstrap的Class設定2

  • 分享至 

  • xImage
  •  

文字

分類

  1. font開頭
  2. text開頭

使用

對齊方式

  1. 文字靠左對齊:text-left
  2. 文字靠右對齊:text-right
  3. 文字置中對齊:text-center
  4. 文字左右對齊:text-justify,中文可能有些瀏覽器不支援

文字不換行

  • 使用text-nowrap

文字多餘的變成刪節號

  • 使用text-truncate,但文字區塊需要先設定寬度

文字粗細

  1. 正常:font-weight-normal
  2. 粗體:font-weight-bold

文字斜體

ex:

<h1 class="text-right">TITLE</h1>
<a href="#" class="font-weight-bold">link</a>

按鈕

寫法

  1. btn:必寫,是設定按鈕結構用
  2. btn-*:選擇下面的組合使用,一個按鈕可以用很多btn-*的Class

組合

分為實心按鈕、外框按鈕、按鈕狀態、大小

實心按鈕

  1. primary
  2. secondary
  3. success
  4. danger
  5. warning
  6. info
  7. light
  8. dark
  9. white
  10. link,有按鈕結構,但看起來像連結,和按鈕並排時很好用

外框按鈕

按鈕只有框線,hover等動作時會變實心,寫法是實心按鈕中間加outline,如btn-outline-primarybtn-outline-secondary

按鈕狀態

  1. active
  2. disable:建議HTML標籤用<button>,否則Tab鍵點選時可能仍可被選擇

大小

  1. 加斷點,像smlg
  2. block:會像加了display: block;一樣,寬度變100%

注意事項

  1. btn可以使用在HTML標籤的<button><a><input>上,input又分為buttonsubmitreset三種,使用時要標準才會顯示正確。
  2. 使用active時,外框按鈕會變實心。
  3. 注意在寫按鈕狀態時,如果寫在<a>標籤,要寫在Class上,因為<button><input>有支援activedisable屬性,所以可以寫在標籤上。

上一篇
JS讀書筆記30天 - Day24 Bootstrap的Class設定
下一篇
JS讀書筆記30天 - Day26 Bootstrap的Class設定3
系列文
JS讀書筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言